<template>
  <div>
    <FormMode :mode="formMode?.mode">
      <mci-form ref="autoFormRef" :model="autoForm" :rules="rules" label-width="auto" label-position="top">
        <!-- APP_ID -->
        <mci-form-item label="APP_ID" prop="appId">
          <mci-input
            v-model="autoForm.appId"
            :maxlength="INPUT_MAX_APP_NAME"
          />
        </mci-form-item>

        <!-- APP_KEY -->
        <mci-form-item label="APP_KEY" prop="appKey">
          <mci-input
            v-model="autoForm.appKey"
            :maxlength="INPUT_MAX_APP_URL"
          />
        </mci-form-item>
      </mci-form>
    </FormMode>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { MciInput, MciForm, MciFormItem } from '@/components/base';

import { useFormMode } from '@/components/base/Form/mode';
import { CheckAppForm, INPUT_MAX_APP_NAME, INPUT_MAX_APP_URL } from '../../data';

const emit = defineEmits(['change']);
const formMode = useFormMode();

// 表单
const autoFormRef = ref<any>();
const autoForm = reactive<CheckAppForm>({
  id: '',
  appId: '',
  appKey:  ''
});

const rules = reactive<any>({
  appId: [{ required: true, message: '请填写APP_ID', trigger: 'blur' }],
  appKey: [{ required: true, message: '请填写APP_KEY', trigger: 'blur' }]
});
const resetForm = () => {
  autoForm.appId='';
  autoForm.appKey= '';
};

defineExpose({ resetForm });

watch(
  [ () => autoForm],
  () => {
    emit('change', {
      ...autoForm
    });
  },
  { deep: true }
);
</script>
